<template>
  <div class="home">
      <h1>Vue基本语法---html模板语法({{  }}+指令)</h1>
      <h2>{{str}}</h2>
      <h2>num的值:{{num}}</h2>
      <h2>学生的姓名{{studentNames}}</h2>
      <h2>学人的信息{{person}}</h2>
      <hr>
      <p v-for="(index,item) in studentNames">
        {{index}}--{{item}}
      </p>
      <hr>
      <p v-for="item in studentNames">
        {{item}}
      </p>
      <hr/>
      <p v-for="item in student">{{item.id}}--{{item.name}}--{{ item.age }}</p>
      <hr>
      姓名:
        <input type="text" v-model="name"/><br/>
        密码:<input type="text" v-model="pass"/><br/>
        <input type="button" value="登录" @click="login" /><br/>
      <input type="button" value="改变num的值" @click="changeNum"/>
  </div>
</template>

<script setup lang="ts">
//在V先要声明响应式数据
import { reactive,toRefs} from 'vue'

let data:any=reactive({
  str:'hello world',
  num:100,
  studentNames:["张三","李四","王五","送气"],
  student:[
    {id:1,name:'张三',age:20},
    {id:2,name:'李四',age:24},
    {id:3,name:'王五',age:18},
    {id:4,name:'赵六',age:30},
    {id:5,name:'送气',age:35},
  ],
  person:{
    name:'张三',
    age:20,
    sex:'女'
  },
  name:'',
  pass:'',

})
let {str,num,studentNames,person,student}=toRefs(data)
let {name,pass}=toRefs(data)
//函数
const changeNum=()=>{
  num.value++;
}
const login=()=>{
alert("姓名"+name.value+"密码"+pass.value)
}
</script>

<style scoped>

</style>